DevelopersIOサイトの画像配信にCloudflareを導入しました

DevelopersIOサイトの画像配信にCloudflareを導入しました

当ブログサイトの画像配信を改善するため、Cloudflare Polishを導入してみました。
Clock Icon2023.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

2023年9月より当ブログサイト(DevelopersIO)の画像配信を改善するため、CDNとして Cloudflareを導入、 Cloudflare Polish を利用した WebP変換などの最適化を開始しました。

その内容と、この半月間で確認できた実績、効果について共有させて頂きます。

構成図

構成図cloudflare-polish

事前準備

DNS

未活用だったドメインのDNSを、Route53のHostedZoneからCloudflareに移設しました。

CloudFront

従来から画像ファイル保管に利用しているS3をオリジンとして設定したCloudFrontを用意、 CloudflareのDNSに CNAME「プロキシ無し」で登録しました。

サイトプラン変更

「Cloudflare Polish」プロ以上のサイトプランで利用可能です。

イベントなどでスパイク的なアクセス発生時、ブログ画像配信が滞る事は望ましくないため、今回は「ビジネスプラン」を月額課金で利用する選択としました。

サイトプランの変更

Polish設定

Cloudflareの管理画面で、「スピード」→「最適化」→「イメージの最適化」より、 「非可逆」、「WebP変換」 とした設定を行いました。

スピード・最適化

切替作業

WP Offload Media

WordPressのメディアとしてアップロードしたファイル、S3待避に利用するプラグイン(WP Offload Media Lite)の設定で、 画像ファイルの公開に用いるカスタムドメイン名(CNAME)を、Cloudflare管理の「developers.io」 ドメインのFQDNに変更しました。

OffloadMediaCname設定

DNSプロキシ

CloudflareのDNS設定で、画像配信に利用するCNAME設定のプロキシステータスを「プロキシ無し」から「プロキシ済み」に変更。 Polish による画像最適化を有効としました。

Cloudflare-DNS設定

転送実績

Cloudflare 導入前後、一週間分の画像配信の転送実績の比較を実施、20〜30%の転送量の削減を確認できました。

Cloudflare

  • 9/8(金)〜9/14(木)

3-cloudflare転送実績

CloudFront

  • 8/17(金)〜8/23(木)

0-CloudFront転送実績

効果

WebP配信の割合

75%の画像画像ファイルがWebP変換されている事が、Cloudflareのパフォーマンスレポートで確認できました。

CloudflareWebP比率

ファイルサイズ比較

配信頻度が多かった画像ファイルを中心に、Poloshによる画像最適前後のファイルサイズを比較。 20〜70%のファイルサイズの抑制が実現出来ていることが確認できました。

Polishなし Poloshあり 削減率(%) 画像ファイル
62.5 KB 29.5 KB 52.8% 230808_1200x630.png
122 KB 96.4 KB 21.0% freelance_1200x630_0920infra.png
140 KB 78.9 KB 43.6% 230417-Zenn-publication.jpg
649 KB 160 KB 75.3% aws_seminar_230926.jpg

EXIF除去

EXIF確認君を利用。 スマホで撮影した写真のEXIF情報、GPS情報などが削除されている事を確認できました。

Polish有効

EXIF確認君_EXIF情報なし

Polish無効

EXIF確認君_EXIF情報あり

  • EXIF情報より、撮影場所、機材などの確認が出来る状態でした。

コスト

Cloudflareによる画像ファイルの配信を開始後、従来画像配信に利用していたCloudFrontのアウトバウンド通信量は1/3に減少しました。

  • 8/17(金)〜8/23(木)

0-CloudFront転送実績

  • 9/8(金)〜9/14(木)

1-CloudFront転送実績-2

当ブログサイト、CloudFrontは クラスメソッドメンバーズ、AWS請求代行(EC2・CDN割引プラン)の価格で利用しています。

2.2TBのアウトバウンド通信が減少した場合、月額約100ドルのAWS利用費が削減。 Cloudflare(ビジネスプラン:月額250ドル)の導入により、150ドルの月額費用追加となる計算となりました。

CloudFrontアウトバウンド通信量と費用の変化

前月実績 当月(予想)
アウトバウンド通信量 3451.9 GB 1244.4 GB
東京リージョン定価計算($0.114/GB) 393.5 USD 141.9 USD
EC2・CDN割引プラン計算($0.0456/GB) 157.4 USD 56.7 USD

EC2・CDN 割引プラン ※2 Amazon CloudFront全リージョンの単価が$0.0456/GBになります。例えば東京リージョンの単価$0.114/GBやアジアパシフィックリージョンの単価$0.120/GBに対して、$0.0456/GBでご提供します。

まとめ

DevelopersIOのブログサイト、2013年当時から画像ファイルの配信には S3とCloudFrontを利用、 ブログ配信環境に占めるCloudFront、S3の費用の割合としては高くなかった事もあり、画像最適化の優先度は低めの扱いでした。

過去には、WordPressプラグイン、Lambda、Nginx を利用した画像最適化の導入は試みていましたが、 WordPressプラグインはシステムの過負荷を招く原因となっていた事。 LambdaとNginxは、利用するライブラリに起因する脆弱性への対応や、未対応フォーマット、画質などの課題が発生した事で継続利用を断念した経緯がありました。

今回導入した「Cloudflare Polish」は、 ドメインの用意と 有償プランの契約だけで、簡単に最適化された画像配信を環境を実現できました。

引き続き 費用対効果に優れたブログ配信環境の実現に向けて Cloudflareの各種サービスの活用を図る予定ですが、 他にも 優れたSaaS、PaaS などの活用も試みていく予定です。今後の改善にもご期待ください。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.